import DefaultImage from '@/asset/default-image.png';
import ErrorComp from '@/components/common/error-comp';
import ImagePreview from '@/components/common/image-preview';
import LeftToRightView from '@/components/common/motion/left-to-right-view';
import QueryImage from '@/components/common/query-image';
import { Button } from '@/components/ui/button';
import { getProductById } from '@/service/query/product';
import dayjs from 'dayjs';
import Link from 'next/link';
import { z } from 'zod';

export const metadata = {
  title: '商品详情',
};

const paramSchema = z.object({
  id: z.coerce.number().int().positive(),
});

export default async function Page({
  params,
}: { params: Promise<{ id: string }> }) {
  const paramsRes = paramSchema.safeParse(await params);
  if (!paramsRes.success)
    return <ErrorComp message="参数错误" backPath="/admin/shop" />;

  const { result, error } = await getProductById(paramsRes.data.id);
  if (error)
    return <ErrorComp message={error.message} backPath="/admin/shop" />;

  return (
    <LeftToRightView>
      <div className="p-5 px-10 rounded-lg bg-background min-h-[90vh] space-y-8">
        <Link href={`/admin/shop/${result.shopId}`}>
          <Button variant="ghost" className="group">
            <span className="i-ri-arrow-left-s-line group-hover:-translate-x-1 transition-transform" />
            返回
          </Button>
        </Link>
        <div className="text-xl font-bold">外卖详情</div>
        <div className="space-y-4">
          <div className="font-bold text-lg">基本信息</div>
          {[
            {
              label: '商品ID:',
              value: result.id,
            },
            {
              label: '名称:',
              value: result.name,
            },
            {
              label: '描述:',
              value: result.description,
            },
            {
              label: '商铺名称:',
              value: result.shop.name,
            },
            {
              label: '价格:',
              value: `${result.price} 元`,
            },
            {
              label: '创建时间:',
              value: dayjs(result.createdAt).format('YYYY-MM-DD HH:mm:ss'),
            },
            {
              label: '更新时间:',
              value: dayjs(result.updatedAt).format('YYYY-MM-DD HH:mm:ss'),
            },
          ].map(({ label, value }) => (
            <div key={label} className="flex items-center ">
              <div className="w-0 text-nowrap">{label}</div>
              <div className="text-sm  ml-32">{value}</div>
            </div>
          ))}
        </div>
        <div className="space-y-4">
          <div className="font-bold text-lg">商品图片</div>
          <div className="flex gap-2">
            {result.imageKeys.map((key) => (
              <ImagePreview
                key={key}
                imageKey={key}
                button={
                  <QueryImage
                    key={key}
                    imageKey={key}
                    defaultImage={DefaultImage}
                    wrapperClassName="w-32 h-24"
                    imgClassName="w-full h-full object-cover"
                  />
                }
              />
            ))}
          </div>
        </div>
      </div>
    </LeftToRightView>
  );
}
